<template>
	<div class="add-company-manager">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<!-- 语言动态标签页面 -->
				<el-row :gutter="24">
					<el-col :span="20">
						<elTabPane :isShow="isTag" :tagId="tagId" @tagClick="tagClick"></elTabPane>
					</el-col>
				</el-row>
				<el-form ref="info" :model="info" :rules="rules" class="demo-ruleForm">
					<el-form v-for="(info, index) in info.list" :ref="`info${index}`" :model="info" :rules="rules"
						v-show="tagId === info.langId" :key="index" label-width="100px" class="demo-ruleForm">
						<div class="content_info">
							<template v-if="propUpType !== 'detail'">
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeNo')" prop="code">
											<el-input v-model="info.code" :disabled="propUpType === 'add' ? false : true"
												:placeholder="$t('placeholderTip.enter')" show-word-limit maxlength="10"
												@change="copyValue('list', 'code', info.code)" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeAllName')" prop="allName">
											<el-input v-model="info.allName" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeShortName')" prop="name">
											<el-input v-model="info.name" :placeholder="$t('placeholderTip.enter')" maxlength="10"
												show-word-limit />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.superiorTitle')" prop="superiorId">
											<el-cascader ref="elCascader" :key="isResouceShow" v-model="info.superiorId"
												:options="hierarchyList" :props="optionProps" clearable filterable style="width:100%"
												@change="handleChange" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeType')" prop="type">
											<el-select v-model="info.type" filterable clearable :placeholder="$t('placeholderTip.pSelect')"
												@change="copyValue('list', 'type', info.type)" style="width:100%;">
												<el-option v-for="item in $t('storeTypeList')" :key="item.id" :label="item.name"
													:value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.brandStore')" prop="brands">
											<el-select v-model="info.brands" multiple filterable clearable
												@change="copyValue('list', 'brands', info.brands)" :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%;">
												<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.defaultLanguage')" prop="languageId">
											<el-select v-model="info.languageId" filterable clearable
												@change="copyValue('list', 'languageId', info.languageId)"
												:placeholder="$t('placeholderTip.pSelect')" style="width:100%;">
												<el-option v-for="item in languageList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.currencyType')" prop="currencyId">
											<el-select v-model="info.currencyId" filterable clearable
												@change="copyValue('list', 'currencyId', info.currencyId)"
												:placeholder="$t('placeholderTip.pSelect')" style="width:100%;">
												<el-option v-for="item in currencyList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeLogo')" prop="logo">
											<div class="avatar-uploader">
												<upload-img customsrc="true" :defsrc="info.logo"
													:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'logo') }">
													<i class="el-icon-plus avatar-uploader-icon" />
												</upload-img>
											</div>
											<div class="tipInfo">（{{ $t('text.recommendedSize') }}40px*40px）</div>
											<div v-if="info.logo" class="deleteImg" @click.stop="deleteImg(info, 'logo')">
												<img src="@/assets/images/close.png">
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.businessLicense')">
											<div class="avatar-uploader">
												<upload-img customsrc="true" :defsrc="info.license"
													:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'license') }">
													<i class="el-icon-plus avatar-uploader-icon" />
												</upload-img>
											</div>
											<div v-if="info.license" class="deleteImg" @click.stop="deleteImg(info, 'license')">
												<img src="@/assets/images/close.png">
											</div>
											<div class="tipInfo">（{{ $t('text.maximumLimit') }}5M）</div>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.contactPerson')" prop="contacts">
											<el-input v-model="info.contacts" :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'contacts', info.contacts)" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.contactPhone')" prop="phone">
											<el-input v-model="info.phone" type="number" @mousewheel.native.prevent @keydown.native.up.prevent
												@keydown.native.down.prevent @keydown.native.tab.prevent :placeholder="$t('placeholderTip.enter')"
												@change="copyValue('list', 'phone', info.phone)" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storePhone')" prop="tel">
											<el-input v-model="info.tel" type="number" @mousewheel.native.prevent @keydown.native.up.prevent
												@keydown.native.down.prevent @keydown.native.tab.prevent
												@change="copyValue('list', 'tel', info.tel)" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="12" style="display: flex;">
										<el-form-item :label="$t('publicFormLabel.addressResidence')" style="width:40%;" prop="countryId">
											<el-select v-model="info.countryId" filterable :placeholder="$t('placeholderTip.choiceCountry')"
												style="width:100%;" @change="getProvinceCode">
												<el-option v-for="item in countryList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
										<el-select v-model="info.oblastId" filterable :placeholder="$t('placeholderTip.choiceState')"
											style="width:32%;margin:0 2%;" @change="getOblastCode">
											<el-option v-for="item in oblastList" :key="item.id" :label="item.name" :value="item.id" />
										</el-select>
										<el-select v-model="info.cityId" filterable :placeholder="$t('placeholderTip.choiceCity')"
											@change="copyValue('list', 'cityId', info.cityId)" style="width:32%;">
											<el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
										</el-select>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.fullAddress')" prop="address">
											<el-input v-model="info.address" :placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="24" style="display: flex;">
										<el-form-item :label="$t('formLabel.latAndLon')" style="width:300px;" prop="longitude">
											<el-input v-model="info.longitude" @change="copyValue('list', 'longitude', info.longitude)"
												:placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
										<el-form-item label-width="0" label="" prop="latitude" style="width:210px;margin:0 10px;">
											<el-input v-model="info.latitude" @change="copyValue('list', 'latitude', info.latitude)"
												:placeholder="$t('placeholderTip.enter')" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.sort')" prop="sort">
											<el-input v-model="info.sort" type="number" @change="copyValue('list', 'sort', info.sort)"
												:placeholder="$t('placeholderTip.enter')" />
										</el-form-item>

									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="24">
										<el-form-item :label="$t('formLabel.storeImg')">
											<div class="boxIgmContent">
												<div class="imgBox" v-for="(img, index1) in info.photos" :key="index1">
													<upload-imgs customsrc="true" :defsrc="img"
														:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'photos', 'more', index1,) }">
														<i class="el-icon-plus avatar-uploader-icon" />
													</upload-imgs>
													<div v-if="img" class="deleteImg" @click.stop="deleteImg(info, 'photos', index1)">
														<img src="@/assets/images/close.png">
													</div>
												</div>
												<div class="avatar-uploader" v-if="info.photos.length < limit">
													<upload-imgs customsrc="true" :imgmums="info.photos.length"
														:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'photos', 'more') }">
														<i class="el-icon-plus avatar-uploader-icon" />
													</upload-imgs>
												</div>
												<div class="tipInfo">（{{ $t('text.size') }}1920*1080）</div>
											</div>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.storeContent')">
											<el-input type="textarea" :placeholder="$t('placeholderTip.enter')" rows=3 v-model="info.introduce"
												maxlength="499" show-word-limit />
										</el-form-item>
									</el-col>
								</el-row>
							</template>
							<template v-else>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeNo')">
											<el-input readonly :value="info.code" show-word-limit maxlength="10" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeAllName')">
											<el-input readonly :value="info.allName" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeShortName')">
											<el-input readonly :value="info.name" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.superiorTitle')" prop="superiorId">
											<el-input readonly :value="info.superiorName" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeType')" prop="type">
											<el-select disabled v-model="info.type" filterable clearable style="width:100%;">
												<el-option v-for="item in $t('storeTypeList')" :key="item.id" :label="item.name"
													:value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.brandStore')" prop="brands">
											<el-select v-model="info.brands" multiple filterable clearable style="width:100%;">
												<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.defaultLanguage')" prop="languageId">
											<el-select disabled v-model="info.languageId" filterable clearable style="width:100%;">
												<el-option v-for="item in languageList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.currencyType')" prop="currencyId">
											<el-select disabled v-model="info.currencyId" filterable clearable style="width:100%;">
												<el-option v-for="item in currencyList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeLogo')">
											<div class="avatar-uploader">
												<upload-img :preview="true" :defsrc="info.logo" disabled />
											</div>
											<div class="tipInfo">（{{ $t('text.recommendedSize') }}40px*40px）</div>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.businessLicense')">
											<div class="avatar-uploader">
												<upload-img :preview="true" :defsrc="info.license" disabled />
											</div>
											<div class="tipInfo">（{{ $t('text.maximumLimit') }}5M）</div>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.contactPerson')">
											<el-input readonly :value="info.contacts" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.contactPhone')">
											<el-input readonly :value="info.phone" />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storePhone')">
											<el-input readonly :value="info.tel" show-word-limit maxlength="11" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.addressResidence')">
											<el-input readonly v-if="info.countryName"
												:value="info.countryName + '/' + info.oblastName + '/' + info.cityName" />
											<el-input readonly v-else />
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.fullAddress')">
											<el-input readonly :value="info.address" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="24" style="display: flex;">
										<el-form-item :label="$t('formLabel.latAndLon')" style="width:300px;" prop="longitude">
											<el-input readonly v-model="info.longitude" />
										</el-form-item>
										<el-form-item label-width="0" label="" prop="latitude" style="width:210px;margin:0 10px;">
											<el-input readonly v-model="info.latitude" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24" v-if="info.photos.length > 0">
									<el-col :span="8">
										<el-form-item :label="$t('formLabel.storeImg')">
											<div class="boxIgmContent">
												<div class="imgBox" v-if="info.photos.length > 0" v-for="(img, index) in info.photos"
													:key="index">
													<upload-imgs :preview="true" :defsrc="img" disabled>
														<i class="el-icon-plus avatar-uploader-icon" />
													</upload-imgs>
												</div>
											</div>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="24">
									<el-col :span="10">
										<el-form-item :label="$t('formLabel.storeContent')">
											<el-input readonly type="textarea" rows=3 v-model="info.introduce" maxlength="499"
												show-word-limit />
										</el-form-item>
									</el-col>
								</el-row>
							</template>
						</div>
					</el-form>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	getBrandList,
	getcitySelectList,
	getOblastAllList,
	getCountryAllList
} from '@/api/basics-manager'
import {
	getBranchInfo,
	setBranchSave,
	setBranchUpdate,
} from '@/api/organizational-chart'
import {
	getHierarchySuperList
} from '@/api/public'
import {
	getCurrencySelectList
} from '@/api/system-manager'
import UploadImgSimple from '@/components/Upload/UploadImgSimple'
import UploadImgSimples from '@/components/Upload/UploadImgSimple_more'
import elTabPane from '@/components/el-tab-pane/index'; //语言动态标签页面
import defaultSettings from '@/settings'
export default {
	name: 'CompanyManagerInfo',
	components: {
		elTabPane,
		UploadImg: UploadImgSimple,
		UploadImgs: UploadImgSimples //多张图片
	},
	data() {
		return {
			tagId: '',//语言id 默认id 
			isTag: false,
			BASE_IMG: defaultSettings.BASE_IMG,
			limit: 5,
			info: {
				list: []
			},
			isResouceShow: 0,
			hierarchyList: [],//所属上级
			brandList: [],//门店品牌
			optionProps: {
				expandTrigger: 'click',
				checkStrictly: true,
				value: 'id',
				label: 'name',
				children: 'children',
				emitPath: false
			},
			rules: {
				code: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
				],
				allName: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],

				superiorId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				type: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				languageId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				currencyId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				logo: [
					{
						required: true,
						message: this.$t('placeholderTip.pUpload'),
						trigger: 'change'
					}
				],
				countryId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				cityId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				oblastId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				brands: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				address: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
			},
			countryList: [], // 省列表
			oblastList: [], // 市列表
			cityList: [], // 区列表
			propUpType: '', // 'add' edit detail
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7
				}
			},
			fullscreenLoading: false,
			currencyList: [],
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {
		hierarchyList: {
			handler(newVal) {
				if (newVal.length === 0) {
					++this.isResouceShow
				}
			}
		},
	},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		this.isTag = true;
		this.tagId = this.languageId;
		if (this.$route.query.propUpType === 'add') {
			this.init()
			this.addData()
			this.getHierarchySuperListData()
			this.getBrandsData()
		} else if (this.$route.query.id) {
			this.init()
			this.getBrandsData()

			if (this.$route.query.propUpType === 'edit') {
				this.getHierarchySuperListData()
				this.getCurrency()
			}
			this.getInfo(this.$route.query.id)
		}
		this.getCurrency()
	},
	created() {
		console.log('created')
	},
	activated() {

	},

	destroyed() {
	},
	methods: {
		// 语言菜单处理
		tagClick(id) {
			if (id !== this.tagId) {
				this.resetForm('info', 2)
				this.tagId = id
			}
		},
		addData() {
			var arr = []
			this.languageList.map(i => {
				var obj = {
					langId: i.id,
					code: '', // 编号
					allName: '', // 公司全称
					name: '', // 公司简称
					superiorId: '',//所属上级id
					type: '',//门店类型 1: 4S店 2: 1S店 3: 二级店 4: 服务站店
					brands: [],//门店品牌
					languageId: '',//默认语种
					currencyId: '',//货币类型 1:人民币 2:美元 3:索姆 4:卢布
					logo: '', // logo
					license: '', // 营业执照
					contacts: '', // 联系人
					phone: '', // 联系电话
					tel: '',//门店电话
					countryId: '',//国Id
					cityId: '',//市Id
					oblastId: '',//自治州Id
					address: '', // 详细地址
					latitude: '',//纬度
					longitude: '',//经度
					status: 1, // 状态 
					photos: [], //门店图片
					introduce: '', //门店介绍
				}
				arr.push(obj)
			})
			this.info.list = arr
		},
		// 重置表单
		resetForm(vaid, type) {
			// type 1 重置表单 2仅清空校验
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					Promise.all([
						//数组部分的表单，用map返回验证函数的调用
						...this.info.list.map((item, index) => {
							var refs = `info${index}`
							let valiForm = this.$refs?.[refs].validate
								? this.$refs?.[refs]
								: this.$refs?.[refs][0];
							if (type === 1) {
								valiForm.resetFields()
							} else {
								valiForm.clearValidate()
							}
						})

					])
				})

			}
		},

		//货币类型
		getCurrency() {
			getCurrencySelectList().then(res => {
				if (res.code === 200) {
					this.currencyList = res.data
				}
			})
				.catch(err => {
					console.log(err, 'err')
				})
		},
		//门店品牌
		getBrandsData() {
			getBrandList('status=1')
				.then(res => {
					if (res.code === 200) {
						this.brandList = res.data.list
					}
				})
				.catch(err => {
					console.log(err, 'err')
				})
		},

		// 所属上级
		getHierarchySuperListData() {
			getHierarchySuperList(1)
				.then(res => {
					if (res.code === 200) {
						this.hierarchyList = res.data
					}
				})
				.catch(err => {
					console.log(err, 'err')
				})
		},


		init() {
			// 省列表
			getCountryAllList({}).then(res => {
				if (res.code === 200) {
					this.countryList = res.data
				}
			})
		},
		// -拿省id  获取到市列表
		getProvinceCode(val) {
			//  省id
			this.countryList.filter(item => {
				if (item.id === val) {
					// 获取省名称
					this.info.list.map(i => {
						i.countryId = val
						i.cityId = ''
						i.oblastId = ''
					})
					this.oblastList = []
					this.cityList = []
					// 获取州列表
					getOblastAllList(val).then(res => {
						if (res.code === 200) {
							this.oblastList = res.data
						}
					})
				}
			})
		},
		getOblastCode(val) {
			//根据 州 id  获取 市
			this.oblastList.filter(item => {
				if (item.id === val) {
					// 获取市名称
					this.info.list.map(i => {
						i.oblastId = val
						i.cityId = ''
					})
					getcitySelectList(val).then(res => {
						if (res.code === 200) {
							// 市
							this.cityList = res.data
						}
					})
				}
			})
		},

		// 无多语言字段处理
		copyValue(key, key2, value) {
			this.info[key].map(i => {
				i[key2] = value
			})
		},
		deleteImg(tar, key, index) {
			//多张图片删除处理
			if (index >= 0) {
				// 非对语言
				if (key === 'photos') {
					this.info.list.map(i => {
						i[key].splice(index, 1)
					})
				} else {
					// 多语言
					tar[key].splice(index, 1)
				}
			} else {
				// 非多语言字段
				if (key === 'logo' || key === 'license') {
					this.info.list.map(i => {
						i[key] = ''
					})
				} else {
					// 多语言字段
					tar[key] = ''
				}
			}
			this.$forceUpdate()
		},
		handleAvatarSuccess(res, file, tar, key, type, index) {
			if (res) {
				//多张图片处理 
				if (type === 'more') {
					if (index >= 0) {
						// 非多语言 多张图片
						if (key === 'photos') {
							this.info.list.map(i => {
								i[key][index] = res.key
								// 上传成功后，手动验证一次表单 imgurl为你要校验的字段
							})
						} else {
							// 多语言图片
							tar[key][index] = res.key
						}
					} else {
						// 非多语言 第一张图片
						if (key === 'photos') {
							this.info.list.map(i => {
								i[key].push(res.key)
							})
						} else {
							// 多语言图片
							tar[key].push(res.key)
						}
					}
				} else {
					//单张图片 非多语言字段
					if (key === 'logo' || key === 'license') {
						this.info.list.map(i => {
							i[key] = res.key
						})
					} else {
						// 多语言字段
						tar[key] = res.key
					}
				}
				this.$forceUpdate()
			}
		},
		// 所属上级
		handleChange(e) {
			if (e) {
				this.info.list.map((i, index) => {
					i.superiorId = e
					this.$refs.elCascader[index].dropDownVisible = false
				})
				// 收起下拉
			} else {
				this.info.list.map(i => {
					i.superiorId = ''
				})
			}
			this.$forceUpdate()
		},
		getCheck(index) {
			var list = JSON.parse(JSON.stringify(this.info.list))
			list.splice(index, 1)
			var falg1 = []
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				// 表单校验
				var name = ''
				// if 多语言必填字段    	// else if 多语言必填
				if (item.allName && item.name && item.address) {
				} else if (item.allName || item.name || item.address || item.introduce) {
					this.languageList.map(j => {
						if (j.id === item.langId) {
							name = j.name
						}
					})
					this.$message({
						showClose: true,
						message: name + ':' + this.$t('text.improveForms'),
						type: 'warning'
					})
					falg1.push(0)
					return false
				} else {
					falg1.push(1)
				}
			}
			var isallZeros = false
			// 判断是否包含0
			if (falg1.length > 0) {
				isallZeros = falg1.includes(0)
			}
			return !isallZeros
		},
		// 提交
		addSubmitForm() {
			var list = JSON.parse(JSON.stringify(this.info.list))
			var flag = false
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				var index = i
				// 当前语种 表单校验every
				if (this.tagId === item.langId) {
					let valiForm = this.$refs?.[`info${index}`].validate
						? this.$refs?.[`info${index}`]
						: this.$refs?.[`info${index}`][0];
					valiForm.validate((res) => {
						if (res) {
							// flag = true // 一个多语言字段 直接校验当前表单 
							flag = this.getCheck(index) //多个多语言 需要校验其他语种表单
						} else {
							return false
						}
					})
				}
			}
			if (flag) {
				// 全部表单验证通过
				var arr = JSON.parse(JSON.stringify(this.info.list))
				arr.map(i => {
					i.brands = i.brands.toString()
					i.photos = i.photos.toString()
				})
				this.fullscreenLoading = true
				if (this.propUpType === 'add') {
					setBranchSave({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.addSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
						})

				} else {
					setBranchUpdate({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.editSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.finally(() => {
							this.fullscreenLoading = false
						})
				}
			}
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getBranchInfo(id).then(res => {
				if (res.code === 200) {
					var arr = res.data.t || []
					if (arr.length > 0) {
						this.setInfoData(arr)
					}
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},

		// 详情数据处理
		async setInfoData(data) {
			if (this.propUpType === 'edit') {
				if (data) {
					if (data[0].countryId) {
						// 获取 州 列表
						getOblastAllList(data[0].countryId).then(res => {
							if (res.code === 200) {
								this.oblastList = res.data
							}
						})
					}
					if (data[0].oblastId) {
						// 获取 市列表
						getcitySelectList(data[0].oblastId).then(res => {
							if (res.code === 200) {
								this.cityList = res.data
							}
						})
					}
				}
			}
			this.$nextTick(() => {
				var newArr = []
				var arr = data
				var obj = arr[0]
				if (this.propUpType !== 'detail') {
					this.languageList.map(i => {
						var obj_1 = {
							langId: i.id,
							id: obj.id,
							code: obj.code, // 编号
							allName: '', // 公司全称 -多语言
							name: '', // 公司简称 -多语言
							superiorId: obj.superiorId,//所属上级id
							type: obj.type,//门店类型 1: 4S店 2: 1S店 3: 二级店 4: 服务站店
							brands: obj.brands ? obj.brands.split(',').map(Number) : [],//门店品牌
							languageId: obj.languageId,//默认语种
							currencyId: obj.currencyId,//货币类型 1:人民币 2:美元 3:索姆 4:卢布
							logo: obj.logo, // logo
							license: obj.license, // 营业执照
							contacts: obj.contacts, // 联系人
							phone: obj.phone, // 联系电话
							tel: obj.tel,//门店电话
							countryId: obj.countryId,
							cityId: obj.cityId,
							oblastId: obj.oblastId,
							address: '', // 详细地址-多语言
							latitude: obj.latitude,//纬度
							longitude: obj.longitude,//经度
							status: obj.status, // 状态 
							photos: obj.photos ? obj.photos.split(',') : [], //门店图片
							introduce: '', //门店介绍-多语言
						}
						newArr.push(obj_1)
					})
				} else {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: '',
							code: '', // 编号
							allName: '', // 公司全称
							name: '', // 公司简称
							superiorId: '',//所属上级id
							type: '',//门店类型 1: 4S店 2: 1S店 3: 二级店 4: 服务站店
							brands: [],//门店品牌
							languageId: '',//默认语种
							currencyId: '',//货币类型 1:人民币 2:美元 3:索姆 4:卢布
							logo: '', // logo
							license: '', // 营业执照
							contacts: '', // 联系人
							phone: '', // 联系电话
							tel: '',//门店电话
							countryId: '',//国Id
							cityId: '',//市Id
							oblastId: '',//自治州Id
							address: '', // 详细地址
							latitude: '',//纬度
							longitude: '',//经度
							status: 1, // 状态 
							photos: [], //门店图片
							introduce: '', //门店介绍
						}
						newArr.push(obj)
					})
				}
				arr.map(j => {
					// 非多语言字段 字符转数组处理
					if (j.photos) {
						j.photos = j.photos.split(',')
					} else {
						j.photos = []
					}
					// 品牌
					if (j.brands) {
						j.brands = j.brands.split(',').map(Number)
					} else {
						j.brands = []
					}
					// 根据id进行对象替换
					let index = newArr.findIndex(e =>
						e.langId == j.langId
					)
					if (index > -1) {
						// 替换对象
						newArr[index] = j
					}
				})
				this.info.list = newArr
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.add-company-manager {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;


			&>.el-form {
				width: 100%;
				height: calc(100% - 108px);
				margin-top: 20px;
				overflow: hidden;

				&>.el-form {
					width: 100%;
					height: 100%;
				}

				::v-deep .content_info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.el-table {
						::v-deep th {
							line-height: 40px;
							padding: unset;
							background-color: #f2f2f2;
						}
					}
				}


			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
				padding-top: 10px;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>

